<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Worker 执行十个任务（五个计算 + 五个 DOM 渲染）</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        button {
            margin-top: 10px;
        }

        .task {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <h1>Web Worker 执行任务</h1>
    <button id="calculateButton">开始执行任务</button>
    <div id="results"></div>

    <script>
        // 检查浏览器是否支持 Web Worker
        if (window.Worker) {
            // 创建一个新的 Worker
            const worker = new Worker('worker.js'); // 确保 worker.js 与 index.html 在同一目录下

            // 获取 DOM 元素
            const calculateButton = document.getElementById('calculateButton');
            const resultsDiv = document.getElementById('results');

            // 监听按钮点击事件
            calculateButton.addEventListener('click',  () => {
                // 清空之前的任务结果
                resultsDiv.innerHTML = '';
                // 向 Worker 发送消息，启动五个计算任务
                performDomTasks(resultsDiv);
                worker.postMessage({ task: 'all' });

            });

            // 监听 Worker 发回的消息
            worker.onmessage = (event) => {                
                // 将结果显示在页面上
                const resultElement = document.createElement('div');
                resultElement.className = 'task';
                resultElement.textContent = event.data.message;
                resultsDiv.appendChild(resultElement);
            };
        } else {
            alert('您的浏览器不支持 Web Worker');
        }

        // 定义五个 DOM 渲染任务
        function performDomTasks(resultsDiv) {            
            // 使用循环动态生成五个 DOM 渲染任务
            for (let i = 1; i <= 100; i++) {
                (function (index) {
                    const element = document.createElement('div');
                    element.className = 'task';
                    element.textContent = `DOM 任务 ${index}: 创建了一个新的 DOM 元素`;
                    resultsDiv.appendChild(element);
                })(i);
            }
        }
    </script>
</body>

</html>